<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-tabs v-model="activeTab" @change="tabChange">
        <a-tab-pane v-for="item in tabs" :key="item.value" :tab="item.text"></a-tab-pane>
      </a-tabs>
      <a-row type="flex" align="middle" justify="start">
        <div class="search-item">
          <a-input-search placeholder="请输入商品名称" style="width: 320px" v-model="searchForm.name" />
        </div>
        <a-button type="primary" @click="gotoSearch"> 查询 </a-button>
      </a-row>
    </a-card>
    <a-card :bordered="false" style="margin-top: 12px">
      <a-row type="flex" align="middle" justify="space-between">
        <a-button>商品上架记录</a-button>
        <!-- <a-row type="flex" align="middle" justify="end">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="5" @click="updateAll('is_delete', 1)">批量删除</a-menu-item>
            </a-menu>
            <a-button> 批量设置 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </a-row> -->
      </a-row>

      <a-table
        style="margin-top: 16px"
        ref="tableList"
        @mouseleave.native="onMouseLeaveTable"
        :columns="columns"
        :data-source="dataSource"
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                mouseenter: (e) => {
                  this.currentRowId = record.id
                },
              },
            }
          }
        "
      >
        <!-- 产品名称 -->
        <template slot="goods_name" slot-scope="text, goods">
          <div class="goods-info">
            <img class="goods-pic" :src="goods.cover_pic" alt="" />
            <div class="info-box">
              <a-tooltip placement="top">
                <template slot="title">
                  <span class="goods-name">{{ goods.name }} </span>
                </template>
                <div style="font-weight: bold; line-height: 25px; width: 160px" class="of_el">
                  {{ goods.name }}
                </div>
              </a-tooltip>
              <div style="color: rgb(140, 140, 140); width: 160px" class="of_el">
                {{ goods.cat ? goods.cat.map((item) => item.name).join() : '暂无分类' }}
              </div>
            </div>
            <div class="item-edit-box">
              <a-icon
                class="table_operator_icon"
                size="small"
                v-show="currentRowId == goods.id || goods.visible0"
                type="edit"
                @click="openPopover(goods, 0, $event)"
                title="编辑"
              />
              <MyPopover
                :title="'产品名称'"
                v-if="currentGoodsItem.id == goods.id"
                @onSubmit="submitUpdate(goods, 0)"
                :visible.sync="showNamePopover"
                :isHarf="currentGoodsItem.isHarf"
              >
                <a-textarea placeholder="请输入商品名称" v-model="updateParams.name" style="width: 250px" />
              </MyPopover>
            </div>
          </div>
        </template>
        <!-- 操作 -->
        <span class="table-action" slot="action" slot-scope="text, goods">
          <a @click="onEdit(goods.id)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <!-- <a-menu-item>
              <a href="javascript:;" @click="synchronizationGood(goods.id)">同步门店商品</a>
            </a-menu-item> -->
              <a-menu-item v-show="goods.use_attr == 1">
                <a href="javascript:;" @click="editAttr(goods)">编辑规格</a>
              </a-menu-item>
              <!-- <a-menu-item v-if="goods.product_type == 0">
              <a href="javascript:;" @click="openDrawer(goods.id, goods)">满减设置</a>
            </a-menu-item> -->
              <a-menu-item>
                <a href="javascript:;" @click="showQscode(goods.id)">小程序二维码</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="copyUrl(goods.id)">复制小程序链接</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="delGoodById(goods.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      activeTab: '2',
      tabs: [
        {
          value: '0',
          text: '产品库',
          path: 'purchaseGoodsManagerList',
        },
        {
          value: '1',
          text: '商品分类',
          path: 'purchaseGoodsManagerCat',
        },
        {
          value: '2',
          text: '商品上架记录',
          path: 'purchaseGoodsManagerGoodsRecord',
        },
        {
          value: '3',
          text: '商城上架记录',
          path: 'purchaseGoodsManagerShopRecord',
        },
      ],
      searchForm: {
        name: '',
        status: -1,
      },
      options: [
        {
          title: '全部供货商',
          value: -1,
        },
      ],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '商品名称',
          dataIndex: 'goods_name',
          key: 'goods_name',
          scopedSlots: { customRender: 'goods_name' },
        },
        {
          title: '供货价格',
          dataIndex: 'price',
          key: 'price',
          sorter: (a, b) => a.price - b.price,
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '库存',
          dataIndex: 'goods_num',
          key: 'goods_num',
          defaultSortOrder: '',
          sorter: (a, b) => a.goods_num - b.goods_num,
          scopedSlots: { customRender: 'goods_num' },
        },
        {
          title: '总上架次数',
          dataIndex: 'total_count',
          key: 'total_count',
          defaultSortOrder: '',
          sorter: (a, b) => a.total_count - b.total_count,
          scopedSlots: { customRender: 'total_count' },
        },
        {
          title: '商品采购次数',
          dataIndex: 'buy_count',
          key: 'buy_count',
          defaultSortOrder: '',
          sorter: (a, b) => a.buy_count - b.buy_count,
          scopedSlots: { customRender: 'buy_count' },
        },
        {
          title: '申请时间',
          dataIndex: 'create_time',
          key: 'create_time',
          sorter: (a, b) => a.create_time - b.create_time,
          scopedSlots: { customRender: 'create_time' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,
      currentRowId: '',
      loading: false,
    }
  },
  watch: {},
  computed: {},
  filters: {},
  mounted() {},
  methods: {
    // tab切换
    tabChange(e) {
      if (e == 2) return
      let item = this.tabs[e]
      console.log(item.path)
      this.$router.push({ name: item.path })
    },
    gotoSearch() {
      console.log(this.searchForm)
    },
    onOptionChange(val) {
      let status = val.target.value
      console.log(status)
    },
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    // 分页请求
    tablePageChange(e) {
      console.log(e)
      this.pageNo = e
    },
    // 分页器页数修改回调
    paginationSizeChange(current, size) {
      console.log(current, size)
      this.pageNo = current
      this.pageSize = size
    },
  },
}
</script>

<style scoped>
.search-item {
  margin-right: 50px;
}
</style>
